نعلیم فرونت جي 


/عداد کس یں کل القادر ر ىو 


معلومات مهمه حول الغفرونت بیج ۲۰۰۶۰ 
##تغيير ترميز الصفحة إلى العربية : 


يجب تغيير ترميز صفحة الويب إلى العربية حتى لا تواجه مشاكل أثناء تصميمها ولكي تسهل محركات البحث 
في العثور عليها عند البحت عن المواقع العربية .... وذلك كالتالي: 

-1افتح صفحة جديدة. _, 

-2اضغط بيمين الفارة في اي مكان في الصفحة واختر كعا)ممما٣‏ موPa‏ من القائمة . 

-3من الأعلى اضغط على علامة التبويب. 2۸9139€| 

-4اجعل الخيار الأول على العربية + اسم دولتك . 

-5احعل الخيار الثاني والتالث. Arabi٤‏ 

-6اضغط >0 تم ابدأ العمل في الصفحة . 


##كيفية حعل الصفحة منسقة عند كتابة نص عربي أو نص مختلط ( عربي - انجليزي ): 


ترص الفرونت مد ۲۶٠۰۶‏ أك حفحة جذيدة تقوم تقتجها أنها متاسية للنض المكتؤت من السار يمين اا" 
٠0 Rih"‏ والنص العربي كما تعلم من اليمين لليسار .. لذا يجب علينا تحويل اتجاه النص إلى "Right ۲٥‏ 
"اifاوذلك‏ بأحد الارات التالية: 

-1تفيير وسم بداية الصفحة من <ا”۳ط> إلى . <ااا=dir‏ اtmط>‏ وذلك من قسم 1۲۷1 في أسفل الفرونت 
بيج ۰ كما ذكرنا في الدرس الأول. 

-2او تغيير وسم بداية منطقة الجسم من <504۷< إلl”. <body dir=rtl>‏ 

*ملاحظة ] : في الخيارين السابقين ستلاحظ انتقال شريط التمرير الراسي من اليمين إلى اليسار عند 
معاينة الصفحة في الفرونت بيج او في المتصفح. [ 

-3او باستخدام الجداول لتنظيم الصفحة . حيتث يمكنك تغيير اتجاه النص إلى العربية في النص المكتوب 
داخل الجدول فقط . وذلك بتغيير وسم بداية الجدول من <عاطta<‏ إl”. <table dir=rtl>‏ 

-4أو تغيير خلية واحدة فقط من خلايا الجدول . وذلك بتغيير وسم بداية الخلية من <لأ< إلى . <td dir=rtl>‏ 
وهذا سيفيدك إذا كان اتجاه النص لكامل ااضفخة من اليمين للا وترند أن تة تنص اتجلى قى احد خلا 
الجدول وجعله أکثر تنظيهاً > حیث أن كل ما عليك هو جعل وسم بداية الخلية. <td dir=|tr>‏ 

-5أو تغيير اتجاه النص لمقطع أو فقرة محددة وذلك بتفيير وسم بداية الفقرة من <م> إلى » <ااdir=r >p‏ 
وهو سيفيدك في تنسيق نص من اليسار لليمين السابق ذكره مثل النص الانجليزي بحيث يصبح وسم بداية 
النص الانجليزي في صفحة عربية هو <p dir=rtl> .wıلlو <p dir=|r>‏ 

***ملاحظة : [ تذكر دائماً المسافة قبل كتابة . [ ٣أ‏ 


##طضط نص كما في میکروسوفت وورد : 


لضبط نهاية جميع أسطر نص معين مكتوب في فقرة واحدة » غير وسم بداية الفقرة من <> إلى أحد الأوامر 
التالية : 


1- <P dir="rtl" style="TEXT-ALIGN: justify"> . 

2- <P dir="rtl" style=" TEXT-ALIGN: justify; TEXT-JUSTIFY: inter-word"> 
3- <P dir="rtl" style=" TEXT-ALIGN: justify; TEXT-JUSTIFY: newspaper"> . 
4- <P dir="rtl" style=" TEXT-ALIGN: justify; TEXT-JUSTIFY: kashida"> . 


##طريقة وضع عدة ارتىاطات في صورة واحدة بواسطة الفرونت بيج ٠٠٠۶‏ : 


-1أدرج الصورة في الصفحة . 

اشر قل الضورة بالفارة ١‏ سيظهر فى الاسقل خترتظ اذوات الصضورة. 

-3ستجد في الشريط تلاتة أشكال هي كا ت لااضغط ما تريد منها واصنع شكل حول أي جزء من 
الصورة تريده ان يصبح ارتباط . 

-4بعد أن تكمل وضع الشكل في الصورة سيفتح مربع حوار وضع الارتباط » ٣1ا Create Hye‏ ضع الارتباط 
الذي تريد واضغط . 0۸ 


##لوضع نص يظهر عند مرور الغأرة على صورة أو على ارتباط نصي مثل أا » ارتباط نصى: 


|) نص يظهر عند المرور على الصورة » وهو يستخدم كنص بديل عند عدم ظهور الصورة او للشرح حول ما 
تهدف إليه الصورة » ويتم عمله كالتالي : 

-1ادرج الصورة في الصفحة . , 

-2اضغط على الصورة بيمين الفارة واختر من lلقilئeة. Picture Properties‏ 

-3اكتب في خانة ٠٠×‏ النص الذي تريد ثم اضغط. )0© 

ب- نص عند مرور الفارة على ارتباط نصي : 

-1ظلل على النص المطلوب. 

-2افتح قسم 1۲۷1 في اسفل الفرونت بيج ۲۰۰۶ . 

-3ستجد الشفرة الخاصة بهذا النص مظللة . أضف لها الشفرة التالية : 


ا كات الكو الأصلف لهذا لاط خو مال 


قان الكود بعد الإضافة سيصبح 


##تقارب وتباعد الأاسطر عن مايسبقها أو ما يليها : 


بواسطة فرونت بيج ۲٠٠١‏ يمكنك جعل الأسطر أو الصور أو النماذج أو خلايا الجداول أكثر أو أقل تقارباً أو تباعداً 
عن ما يسبقها او ما يليها ... وذلك كالتالي : 

Paragraph .رaتڂ†l,‎ Format ةمilê -1افتح‎ 

-2سيفتح مربع حوار ... ٣rapوPara‏ من خانة i"9٤ةمS‏ يمكنك تعديل التقارب أو التباعد حيث ان : 

أ) : Bef‏ خاص بتغیير مسافة ما يسبقه. 

ب) : A8۲‏ خاص بتغيير مسافة ما يليه. 


##نقل صفحاتك إلى موقعك في الشبكة بواسطة فرونت بيج ٠٠٠*‏ : 


يمكنك نشر صفحتك بواسطة فرونت بيح بدلا من استخدام المتصفح أو برنامج طا وذلك كالتالي : 
-1افتح قائمة File‏ واضخط Publish Web .”٣"E‏ 

-2اكتب في الأعلى عنوان موقعك كاملاً » وإن اردت ارسال الصفحات لمجلد معين فاکتب ابظضا اسم هذا 
المجلد مJi. http://vww.hi4net.com/HTML‏ 

-3اضغط زر ۸كااانا۴ في الأسفل . 

-4سيفتح مربع » اكتب فيه اسم المستخدم وكلمة المرور الخاصة بموقعك تم اضغط . )0© 


لتحديد عنوان الرسالةه عند ضغط الزانر على ارتىاط لىريدك : 


اا الاک وة اط وا هل ول و 
-2افتح مر حور |iشsl‏ |لارڌlıط. Create Hyperlink"‏ " 
فی خان 8ل اكت الالي. مع كير حنوان بريدك وعتوان الرالة : 


الدرس الأول 


أو لا : قبل البدء في تصميم موقعك عليك تحديد موضوعه هل هو شخصي - برامج - تعليم - تقافي .. إلخ. 
ثانا : ماهي البرامج اللازمة لتصميم صفحات الويب ؟ 
-1المفكرة : ( N0٥24‏ ) وهي موجودة ضمن البرامج الملحقة بويندوز ... ويتم استخدامها لتحرير النصوص التي 
ستضعها في موقعك ومن تم نسخها ولصقها في الفرونت بيج . 
-2مایکروسوفت فرونت بیج ۲۰۰۰:(٥ع۱۲۴۵٣۴۲۵)‏ وهو موضوع شرحنا › وقد اخترناه لأنه من عائلة میکروسوفت 
وین لئے اعد اكل رها فى اداس وف معدن من اة وه برج دى لع ان ته 
صفحات بمستوى احترافي بواسطته . ويوجد هذا البرنامج ضمن مجموعة أوفيس ۲٠٠٠۰‏ كما ذكرنا ( وهو غير 
معرب ) . 
-3برنامج رسومي : لإضافة لمسات جمالية للصفحة كالخلفيات والعناوين .. إلخ . ومن هذه البرامج ما يلي : 
*فوتوشوب)صSh0 (Photo‏ 
*بينت شوب(P]0 (Paint Shop‏ 
*فلاش(طءF1a(‏ 
٠‏ الرسام المرفق بويندوز 
ON O TT‏ 
وسيكون هناك دروس لبعض هذه البرامج في الموقع بمشيئة الله 


#تعرف على واحهة فرونت بيج ۲٠۰۶‏ : 
ولكن قبل البدء في شرح رموز البرنامج وأدواته نورد هذه المعلومة عن صفحة الويب 
*تبدا ضفخة اأ أو الإتش تى ام ال بالوسم <ا#٣آظآ>‏ وتنتهي بالوسم <اصاط/> 
*تنقسم الصفحة إلى منطقتين هما : 
-1منطقة الراس او الهيد: وتبدا الوس <لa2عا>‏ وتنتهي بالوسم <24ع"/> وتحتوي على عنوان الصفحة . 
-2منطقة الجسم أو البودي: وتقع بين الوسمين <500۷> و .. <0¥۷ل00/> وكل ما سيظهر في الصفحة 
سیکون موحود فقي هذه المنطقة . 


والاآن اقتخ الفروتت خ*** ٣ء‏ ستجد أن الإطار أسفل الرنامج تختوى على تلات قسشام هى / أة No‏ 
HTML / Preview .‏ 

*القسم : ا0۲۳2 هو منطقة العمل التي سيتركز فيها شرحنا. 

*القسم : اM1١3‏ لمشاهدة الكود الذي يكتبه البرنامج خلف الصفحة. 

*القسم : W۷عا۷عاP‏ لمشاهدة الصفحة كما ستظهر للمتصفح .. لذلك بعد ان تضيف شي ء للصفحة في 
قسم ا0۲۳2 قم بمشاهدة طريقة ظهوره في منطقة. Wع‏ ۷ع" 

*إليك الآن شرح أهم رموز أشرطة أدوات فرونت بيج ۲٠٠۶‏ : 


| Normal + Tahoma > Z (ID pk} = 


ماداد ت الخطل ب هل عریصس کم الحَط نو الخص 


ثمط خط 
A BE Sn. .‏ -ۍ 0 
ادراج سور اعات راع ب ۰ لصق نسخ قز سآن الصفحة في المتسفح 


ا الدرس الأول 


E 


الدرس الثانى 
#استخدام فرونت بیج: 
بعد أن حددت موضوع موقعك وتعرفت على واجهة فرونت بيج ooo‏ ابدا التنفيذ الآن: 


ى أي مکان فارع ف الصفحة اضغخط یمین الفارة واختر من القائمة المنسدلة Page Properties‏ ستظهر للك اأنافدة 
التالية: 


Paje PiûpêiliEš 


حدد ما تريد... بعد ذلك اضغط في الأعلى على علامة التبويب 83٤)9۲0۷ ١١‏ ستظهر لك النافذة التالية: 
x‏ 


Ef ا‎ 
I UHEHER 


حدد ما ترید تم اضغط. )0 


ثانيً : ابداً بتحرير الصفحة وإدراج الصور وعمل الارتباطات بين الصفحات .... كيف ؟ 


Allg LT EBS N O 
بالكتابة.‎ 


عند لکا نة فى الفروت س وارذت الأسقال للسطر الالى ل كمال الحم السابفة بالط على 
te‏ Eستكون‏ المسافة كبيرة بين السطور ولکj‏ |›ضخغط] . ) Shift +Enter‏ ( 

*لاإدراج صورة : افتح القائمة 1٣56٣٣‏ تم اختر ١٤‏ uاءا۴‏ ستفتح قائمة اختر منها ٤ا۴ ۴۲١۳١‏ بعد ذلك اختر الصورة 
التي تريدها واضغط. )0 

*لوضع وصلة او شاط أو لنك ان ایی ما تسميما . تنقلك لصفحة آخرک أو لصورة أو لمفستند وورد او الاک 
ملف عند الضغط عليها : 

-1اكتب اسم الارتباط : مثلاً .. لمشاهدة صفحتي الشخصية "اضغط هنا" . 

-2ظلل "اضغط هنا " .. وهي الجملة التي تريدها أن تصبح ارتباط لصفحتك الشخصية . 


-3افتح القائمة 1156۲٣‏ واختر منها )همر أو اضغط K+ا۲))‏ في لوحة المفاتيح .. ستظهر لك النافذة 
التالية 


| Create Hyper lirik 


مستشار الإتترنت hin‏ : 
مشستشار الشبكة ٠‏ حصن حهازك ضذ الهاكر J pmof.him‏ 

J ighthim saat, Brrr tre 

مستشار الشبكة ء أضف بحرت بحث لبو قعك [j search.him‏ 

مفستشار الشبكة - اراز وشقايا الكمبيوتر BEL Hiîîi‏ 

منستشار الشيكة . اختضصار اسم الموفة 1 l_J shart hiir‏ 

0 مستشار الشبگة - تعلم رونت بیج Estep. him ۲٠١»‏ 
مستشار الشبكة ٠‏ تعلم فرونت بیج ۲۰٠۰‏ 

مار الب اشبكة ‏ قط رونت بيج . ess‏ 
سقصتشاء الضمكةك ‏ تقل كم ن ست دوب 


e ا0ك اكاك 2 ”ب‎ 
Opiornal 3 4 
Bonkmask: [nore] Target frame: [Page Delauk [none] | 


Cancel | Psxameters. | Se. |‏ 
: (1 )في هذه المساحة ستظهر الصفحات التي قمت بحفظها .. وهذا سيسهل عمل ارتباط إلى هذه 
الصفحات .. فقط اشر بالماوس على الصفحة التي تريد ربطها بجملة " اضغط هنا " وستكتب مباشرة في 
الخانة (۲) » تم اضغط. O0۸‏ 
: (2)في هذه الخانة يمكنك كتابة اسم الصفحة مباشرة مع امتدادها وهو. )۸۲٣.(‏ 
: (3)بالضغط على هذا الرمز ستفتح لك نافذة جديدة يمكنك من خلالها ان تستعرض مجلدات وملفات جهازك 
واختيار ما شئت لتربطه بالجحملة المظللة في الصفحة . 
: (4)بالضغط على هذا الرمز ستفتح لك نافذه لعمل ارتباط إلى بريد إلكتروني .. عند الضغط على الوصلة فقي 
المتصفح یفتح برنامج البريد الإلكتروني الافتراضي للشخص المتصفح لیرتعخاه لك رسالة على العنوان التي 
ستکكتبه في هذه النافذة . 
بعد أن تختار نوع الملف الزي ستربطه بجملة " اضغط هنا " اضغط. 0)۸ 
ستلاحظ أن جملة "اضغط هنا" اض تحتها خط ای أنها أصضبخت ارتباط لصفحة أخرى او لفلف آخر. 
]وينفس الطريقة تقوم بعمل جميع الارتباطات في موقعك .. جرب عمل وصلة أخرى لملف من نوع آخر !!. 1 
**لاحظ أن الارتباط يجب ان يكتب فيه الاسم مع امتداد الملف ... فمتلاً البرامج تكون عادة بامتداد €×ع أو Zip‏ 
لذا يجب عليك كتابة هذا الامتداد اذا yT‏ .. فمتلاً لو اردت عمل ارتباط لتحميل 
برنامج باسم "1۸٣‏ وامتدادہه هو ٤×٥‏ يجب أن يكون الارتباط كالتالي : » ع×ع.٣1۸"‏ وهكذا لبقية الملفات 
باختلاف امتداداتها . 


#كيف سأحفظ صفحاتى وبقية ملفاتىي فى الجهاز ؟؟؟ 

دة الفور التي به مها في موقل باح الام ادين 65 أو اة 

ا ر و للها راا اورا ر ل ل ا ا ل د ق 
اة او دو الان اىه وم اوا دی اف الوس ولاك 

-2يجب حفظ جميع ملفاتك من صفحات وصور .. إلخ فقي مجلد واحد وبعد ف قم بعمل ارتباطات إليها .. 


وذلك حتى لا تحدث مشاكل في ظهورها عند ارسالها إلى الشبكة ... كيف ؟؟؟؟ 
]يفترض فرونت بيج حفظ جميع صفحاتك في المجلد التالي .. \mydocument\myweb‏ :€ لذلك جب عغليك 
أن تضع جميع ملفاتك التي ستستخدمها في مجلد "۷۷8١‏ قبل عمل اي ارتباط لها . أا اة للصور 
فيفترض فرونت بيج لها مجلد داخل مجلد اع۷۷٣‏ وهو كعموة"| لذلك يفضل أن تضع الصور والجرافيك فيها 
خاصة اذا كان موقعك به عدد کبیر منها .. اي ستحفظها في ءع‌b||"29عen†]|"yweص۷documص|:c‏ وبعد ذلك 
تقوم بادراجها في الصفحة أو تصنع لها ارتباط كما تعلمت في السابق .. وبذلك يکون مسار استخدامها صحيح 
وتظهر عند ارسالها للشبكة بدون مشاكل بمشيئة اللّه. [ 
*طريقة حفظ الصفحة في الجهاز بعد عملها : 
افتح القائمة ع٥اأ۴‏ واختر 53۷٥۴‏ ستفتح لك النافذة التالية : 

× 


[I my webs ”| ± Û * PF E = Toads - 


عفنو ان الصفحة ل ...ود __ #سستشار الشيكة حلم خرولت بیج + Pagê tRle:‏ 

Fie neme: = ند تعفد‎ 5 

Sare a5 ype: [web Pages 3 _ Ged |‏ 
في الخانة ۴٠٣ه٣‏ ٥ا۴‏ اكتب اسم الصفحة .. كما يمكنك تغيير عنوان الصفحة الذي حددته مسبقا فقي 
خصائص الصفحة من هذه النافذة وذلك بالضغط على ع9١12‏ فوق اسم الصفحة بعد ذلك اضغط ع5۷ 
ستلاحظ أن البرنامج حفظها في مجلد ا٥۳۷۷‏ كما ذكرنا آنفاً. 
**ملاحظات مهمة** 
-1يجب أن يكون اسم الصفحة الرئيسية ×6ل11 وذلك حتى تظهر مباشرة عند كتابة عنوان موقعك فى 
المتصفح دون الحاجة إلى كتابة اسم هذه الصفحة . 
ت ان تستخدم الحروف اللاتينية لكتابة اسم الصفحة أو أي رمز من الرموز المعروفة والموجودة في لوحة 
المفاتيح ولا تستخدم حروف عربية أو رموز غريبة. 


#كيف سيكون مسار ملفاتي في الشيكة ؟؟؟ 

أنت في جهازك قمت بحفظ ملفاتك في مجلد اس" الذي مساره c:|mydocume†| ywe‏ هذا المسار 
سیستبدل باسم موقعك اي سیصبح www. hi4net.c0m < Ilin‏ وستنقل ملفاتك إلى الشبكة بنفس ترتیبما 
في جهازك .. فمتلاً أنٽت لديك مجلد تحفظ فيه حميع صور موقعك وهو باسم . . Images‏ لذلك ستقوم بانشاء 
مجلد بنفس الاسم في موقعك في الشبكة وتضع فيه جميع الصور المستخدمة :فا بالنسبة للملفات 
الأخرى متّل ضقحات الوبب التى قمت تعملها والتى تثميز بامتداد : )۸0١(‏ أو مشتند وورد × أو غيرها قانت 
وضعتها في جهازك في مجلد ام۷۷" جنباً إلى جنب مع مجلد .. كموة"| لذلك سترسلها إلى الشبكة 
بجانب مجلد .. ك6وة"| وبذلك لن تحدتث مشاكل في فتح الارتباطات على الشبكة بمشيئة الله. 


انتهی الدرس الثاني 


الدرس الثالث 


#كيف تتعامل مع الجداول في فرونت بيج ٠۲٠٠*‏ : 


استخدام الجداول في صفحتك يجعل منها اكثر تنظيما واحترافا . .. فمن غير الجداول لن تستطيع توسيط نص بجانب 
صورة أو تضع نصوص على شكل أعمدة متجاورة أو تضع خط رأسي أو أو . .. إلخ . لذلك نحن نصحك باستخدام 
الجداول فى صفحتك واتقانها !! 
#والآن ابدأ باستخدام الجداول : 
اضغط على رمز ادراج جدول في شريط الأدوات العلوي ) راجع شرح الرموز في الخطوة الأولى ) واختر عدد 
الأعمدة والصفوف الت تریدها . او استخدم اrt<tabعیn]‏ وحدد عدد الخلایا . 
*ستلاحظ أن حدود الجدول الداخلية والخارجية بارزة .. فماذا لو كنت تريد حدود الجدول مخفية في (wع۷1م]۲)‏ 
وظاهرة في قسم )N"٥۲21(‏ للتعامل معها وتدرج ما تريد ؟؟ ... بسيطة!! 
ضع المؤشر في أي خلية داخل الجدول وانقر يمين الفارة ستفتح قائمة اختر منها Table Propeties‏ ستفتح للك نافدة 
توضح خصائص الجدول وهي کالتالي؛ 
Table Properties‏ 


Lapa 


Alignment: ¥ Speci width: 


Float: 1 >| 7 


Lell padding: 2 [ لے‎ 
ell spacing: 2 ات‎ 


Borders 


Size: 3 [0 ات‎ Light 5ّ E i | 
Lalor: 4 E automake 3 Lark 2 E Auıtomallc | 


Background 


Lalor: 5 E Aıtomakic | 


[` llse background picture 


| 3 Browse... 
Style... Larcel | رامک‎ | 


:(1)لتحديد موضع الجدول في الصفحة . 
:( 2 لتخديد الفسافة بين الخلايا . 

:(3)من هذا الخيار يمكنك اخفاء حدود الحدول في المتصفح وذلك بوضع قيمة سمك الإطار » ۲=0٤ل80۲‏ 
ويمكك من هنا أيكا زبادة نمك الإطار. 

:(4)لاختيار لون الإطار حول الخلايا . 

:(5)لاختيار لون خلفية للجدول . 

:(6)لاختيار صورة كخلفية للجدول . 

:(7)لاختيار عرض وارتفاع خلايا الجدول . 

:(8)باختیار لونین مناسبین من الخانتین 50۲٤۲‏ †hوiا‏ و Dark border‏ یمنکكنك جعل خلایا الجدول وکأنھا 
بارزة .. وهذا سيعطما مظهر جميل. 
قم باختیار ما شئت من خصائص واضغط. 0۸ 

)أي اختيار ستختاره من خصائص الجدول سينطبق على جميع خلايا الجدول. ( 
ولکن ماذا لو أرذت تطبيق خضصائض معيتة على خلية واخدذة أو مجموغة من الخلاياً ذون البقية ؟؟ الأمر بستط 


f” ln piuels 


fF In percent 
Specify helght: 


1 i GEE 
{hi GELERÎ 


FIOpEEE... 


ا واحدة ضع المؤشر بداخلها .. ولعدة خلايا قم بتحديد هذه الخلايا . 
-2اضغط يمين الفارة واختر كع ممها٥‏ اام ستظهر لك النافذة التالية التي توضح خصائص الخلية : 


Cell Propertizz HE 


Lzpak 


{1araortal alanrnanl: OCefoult pacify dih: 


Welal cliyr suizril. [Default + | 1 L0 f” In piwels 


f In percent 


E TEE [ د‎ - pact aeıgh:: 
columns spanned: I ا ت‎ 9 i PES 


f” In AHEElI 
` Hesara cal 
I Ho weap 
Uoarders 


nlar’ | EB Luromahe | lıghi herre’ | WM Stamatis أ‎ 
Dart. borceı: EW S2 lnali- ا‎ 


Backgıo 4nd 


Wl Suromahc |‏ | :اتا 


[` Use backeround picture 


| Brae .. 


HEE MEE. 


“pp |‏ إ2 ulê...‏ 
-3كما تلاحظ أنها شبيهة بخصائص الجدول .. اختر منها ما تريد من خصائص لتطبيقها على خلية واحدة أو خلايا 
محددة تم اضغط. ٥K)‏ 
)لفهم الجداول والتعرف إلى تعقيداتها بشكل أفضل احفظ الصفحات التى ترى تعقيداً في تصميمها وافتحها في 
الفرونت بيج .٠٠٠١‏ ( 
انتھی الدرس التالت 


#حسن مظهر صغفحتك مع فرونت بیج ٠٠۶۰۶‏ : 1 
#أولاً: كيف تضع خط أفقي في صفحتك ؟ 
لوضع خط أفقي في الصفحة اذهب إلى ع1 1ه٤وz0اه1<ااميn]‏ سيظهر لك الخط باعداداته الافتراضية ... لكن 


انقر نقرة مزدوجة على الخط الأفقي عندها ستظهر لك النافذة التالية : 


Horızontal Lıne Properties Ix 
Slz8 


fidth: 1K ل‎ fF Percent of window 


` Piuels 


Height: 2 [ ات‎ Pinels 


Alıanrnert 
f” Left f Center f” Right 


Lalor: 3 
mG -| Î Solid line [no shading] 


Style... Lance 


: (1)طول الخط : (2) سمك الخط : (3) لون الخط 


#ثانياً: كيف تدرج رمز ما في صفحتك ؟ 
لإدراج رمز اذھب إلی 1٥ہ‏ ر؟۳٤إعیہ]‏ ستفتح نافذة بھا عدد کبیر من الرموز .. اختر منھا واضغط ١6۲٥یہ[‏ تم 
اضغط. عی°10 


#ثالثاً: كيف تضع تعداد رقمي أو نقطي في صفحتك ؟ 
أي لو كان لديك عدد من الأسطر وتريد ترقيمها أو وضع نقاط بجانبها بأي شكل كانت .. فماذا تفعل ؟ 
-1اكتب السطور التي تريد ترقيمها واجعل الانتقال بينها بو اسطتة ٤)٥‏ فقط وليس. )Sh1۴+]عEnt‏ 
-2ظلل السطور التي ترید ترقیمها واذهب إلى عہ1إ Num be‏ ndہa‏ estاا۴ormat?Bu‏ واختر منھا ما ترید تم 
اضغط .. ×0 ستجد أن المسافة بين الأسطر أصبحت صغيرة . 


#رابعاً: كيف تدرج نص متحرك في صفحتك ؟ 
اذهب إلى !nsert<C0omponent< Marquee‏ ستفتح لك النافذة التالية : 
Marquee Properties Ei‏ 


ûlan with tet 
fF Top 

f” Middle 
f” Boattorn 


r Slide 3 
` Alternate 


Repeat 
f# Continuously 


E ات‎ ES 
¥ Height: E f |n pixels 

f" Im percent Background colo: 4 
E | 


:(1)اكتب هنا النص المتحرك . 

:(2)سرعة تحريك النص . 

:(3)نوع الحركة. 

:(4)لوضع لون لخلفية النص المتحرك . 

اختر ما ترید تم اضغط ... )0 قم بمعاینته في قسم. ۴۲٥۷16۷‏ 

لو اردت تغيير الاعدادات انقر نقرآً مزدوجاً على النص المتحرك ستظهر النافذة السابقة .. أجر تعديلاتك تم 
اضغط. OK)‏ 


width: [222 f |n piuels 
f” ln percent 


#خامساً: ما هى خاصية البوك مارك ؟ 
هل سبق لك أن زرت موقع عندما تضغط على ارتباط ينقلك إلى مكان آخر ولكن في نفس الصفحة ؟ انها خاصية 
البوك مارك !! فكيف يتم عملها ؟ تابع الخطوات التالية فالعملية سهلة: 
1حدد النص أو الصورة التي تريد الزائر أن ينتقل إليها عند ضغط ارتباط معين . 
-2اذهب إلى rkجص‏ )00 8<)إعوn]‏ ستفتح النافذة التالية : 
op‏ 


Uther bookmarks on this pagE: 


ÊRÎ 
DEG DEG 


e 
OK ثم اضغط.‎ Bookmark name ةilخ -3اکتب اسم لهذا النص أو الصورة في‎ 
. -4حدد النص أو الصورة التي تريد الزائر أن يضغطها لينتقل إلى هناك‎ 
: ستفتح النافذة التالية‎ ]nءعإا<‎ 83y مءاانمk -5اذهب إلى‎ 


IRL: [top 


LIptional 


Bookmark: lip Target fra 


هذا جزء من النافذة فقط وهو ما يهمنا في هذه النقطة 
-6افتح القائمة المنسدلة بجوار کلمة )اچم )ہ80 ستجد أن الاسم الذي كتبته في الخطوة )۲( موجود هنا قم باختیاره 
ثم اضغط. 0K‏ 
قم بتجربته في المعاينة ... ولكن لن يتضح لك إلا إذا كانت المسافة بين الارتباط والهدف أكبر من ارتفاع الشاشة ٠‏ 


#سادساً: كيف تدرج أزرار متغيرة بواسطة فرونت بيج Yoon‏ ¢ 
هل سبق لك أن زرت موقع عند مرور الفارة على زر يتغير لونه أو يتحرك أو يحدث له أي تأثير ؟ ... يمكنك عمل 
بعض هذه التأثيرات بواسطة فرونت بيج 2000 كالتالي : 
-1ضع المؤشر في المكان الذي تريد ظهور الزر فيه. 
-2اذھب إِڵى ]nsert<component< Hover Button‏ ستفتح النافذة التالية : 
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Hoyer Button Properties E E 


Button tet: 1| Fant... 
Link to: 2| Browse... 


Button colar: 3| گآ‎ 3 Background color: Wl Storm | 


Effect: 2 | بدا‎ ¥ Effect colar: N | 
width: 5 ١ لاك‎ Height: 6 [24 


Lustorn... L-ancel 
:)في هذه الخانة اكتب النص الذي ترید ظهوره ک الزر‎ 
. :(2)الصفحة التي تريد الزائر ينتقل إليها عند ضغط الزر‎ 
:(3)لون الزر.‎ 
. :(4)نوع التأثير‎ 
:(5)عرض الزر.‎ 


:6)ارتفاع الزر 
وبعد ضبط الإعدادات اضغط »۰ ٥0K‏ ثم قم بتجر بة التاثير في قسم اأمعlيi. Preview‏ 
|[إلو اردت تغيير الاعدادات انقر الزر نقراً مزدوجا على الزر ستفتح النافذة السابقة ثم قم بالتعديلات اللازمة واضغط 
OK].‏ 


انتھی الدرس الرابع 


الدرس الخامس 


**إذا كنت ممن يملكون موقعاً كبيرآً نسبياً على شبكة الإنترنت » به العديد من الملفات المتنوعة » فيلزمك 
أن تكون هذه الملفات أكثر تنظيماً ليسهل إذارة موقعك فيما بعد. وذلك بعمل مجلذات في موقعك. 
##ولكن كيف يتم تنظيم هذه الملفات داخل مجلدات في موقعك ؟ 
-اغليك أولاً بتصيف أقسام موقعك تصنيفاً ملائماً لمختوياتة . 
-2بقد ذلك قم يعمل مجلد لكل قشم وسمه بما يذل على مختويات هذا القسم. 
مال : لنقترض أن لديتا موقعا يضم الأقسام التالية: 
-قسم برامج مجانية . 
-مكتبة صور . 
سنقوم بإنشاء أربعة مجلدات في الجهاز في مجلد ط۷۷8" الافتراضي لملفات موقعك » ونسمي كل مجلد 
بها بذك على فختواة ب ففتلا تكون اسماء الاقسام الساقة قلى التوالى : 
software .‏ - 
pictures‏ - 
SONGS‏ - 
edu‏ - 
وعند إنشاء الصفحات سنقوم بحفظ كل صفحة في المجلد المناسب لها . ويمكنك إنشاء مجلد صور باسم " 
" و امثلاً > داخل كل من هذه المجلدات لحفظ الصور الخاصة بكل قسم . 


#عمل الارتباطات بين صفحات وملفات الأقسام : 

کي الان س ون هال هة ,س الموةة حارج هدو المجادات اسم 006 وة وتس 
6۸ل" اداخل کل مجلد ( قسم). 

وبالتأكيد ستشير إلى أقسام موقعك في صفحة الموقع الرئيسية بوضع ارتباطات لها .... فكيف ستكون 
هذه الارتباطات ؟ 

أولاً : مثلاً ‏ لوضع ارتباط إلى الصفحة الرئيسية لقسم لال يمكنك عمل ذلك بإحدى طريقتين 

ا ظط الو ان یدوا فی خا تة :اال بحت کون الف" 


URL: Ed 


LIptional 
| Bookmark: | lInone] 


تم ضغط . )0 وعندما يقوم الزائر بضغط هذا الارتباط سيقوم المتصفح تلقائياً بقراءة الصفحة الرئيسية ×عل٣|‏ 
لهذا القسمس " duع‏ " 1 

ب) استعراض هذه الصفحة من خانة الملفات في )٣اا Hye‏ عatعاe)‏ بحيت نقوم بفتح مجلد اع والتاشير 
على صفحة ×ع |١‏ بداخله تم نضغط . )0 كما في الشكل التالى : 


Look. In: n. Edu 2 


القسم التعليمي من المصبم الخربي 


URL: inde, hirî 


ثانياً : عمل ارتىاط لصفحة في قسم ما من صفغفحة في قسم آخر: 

**مثال : لدينا صفحة في قسم 50۷2۲٤‏ باسم » ۸۳.اعintern‏ نريد أن نضع فيھا ارتباط لصفحة ٣‏ ٤۸.ااwa‏ 
في قسم . ۲٥١‏ لاام يمكنك عمل ذلك بإاحدی طریقتین : 

) تفبظر الان يدوا : 

-1افتح صفحة "۸1 internet.‏ في الفرونت بيج . 

-2اشر على العبارة أو الصورة التي تريدها ان تکون ارتباط . 

Create Hyberlink .ةذڌêli‎ حiف|3-‎ 

-4في خانة ا۸ل اكتب ما يلي : 


E. *picetures wall. hir 


r Uptional 
waاا.۸٤٣ **حيث أن /.. تعني خروح من مجلد » ٤02۲ء والبقية وصول لصفحة.‎ 
0)۸ -5وأخيراً اضغط.‎ 
: اذخال الغتوان انومات كا‎ 
. -1افتح صفحة "۸۳.أعrnعint في الفرونت بيج‎ 
: اشر غلى الغبارة أو الضورة التق تريدها أن تكون ازتباط‎ 2 
Create Hyberlink .ةڌêli‎ حتiف|3-‎ 
. اام لاستعراض جميع محتوياته‎ ۲١5 -4من الأعلى افتح مجلد‎ 
[ 0) -5أشر على صفحة ااج ثم اضغط.‎ 
. **ويهذه الطريقة يمكنك عمل ارتباطات بين جميع صفحات وملفات أقسام موقعك‎ 
قم بإنشاء مجلدات في قن الشبكة بنفسن ترتتها واسجاعها قى جارك ء وانقل صقات کا‎ 


کے کے کے ت کے ٠ے‏ ت چ چ .چڪ ,ر ع ي ڪڪ ڪر جي ”چڪ ڪڪ چا ت ج تڪ چ ي چ .ج چ :ج چ 


الدرس السادس 


2 


#ماذا تعنى الإطارات ؟ 
lC E‏ 
*متل : وضع قائمة في اليمين ثابتة لا تتغير بتغير الصفحات في اليسار . 
*ملاحظة : ] كما أن للإطارات ميزات فإن لها مساويء ستعرفها عند استخدامك لها . | 
#ما هي أنواع الإطارات التي يمكن عملها بواسطة الفرونت بيج ٠٠٠٠‏ ؟ 
يوفر لك فرونت بيج ۲٠٠٠١‏ عدة أشكال جاهزة للفريمات » يمكنك استخدام ما تريد منها . 
ويمكنك مشاهدة هذه الأشكال کالتالی : 
-1من قائمة Fi]e‏ اختر Page .pî New‏ 
-2سیفتح مربع حوار » اختر من الاعلی. وم ے٣۴‏ 


ener al| Style Sheets | 


Banner and 
Lontentzs 


Header, Footer Horizontal 5 plit 


Hested 
and Lontents 


Hierarchy 


Top-Down  Yertical 5 plik 
Hierarchy 


طهر لد عدة اناك للقرمات ء.تفكا مغا ها فى القفم الايمن السقلئ من مرية الخوار الاير 
غل ها رند + وهذ ال حار اذفط )0 
وإاليك المثال التالى : 

ق 


Normal £ Ho Fiames j HTML f Frames Page HTML j Freee 7 | a | 


ا* 
-إذا أردت أن تنشيء صفحة جديدة في أي إطار اضغط. عوة٣‏ »ع١‏ 
-أما إذا كانت لديك صفحة جاهزة وتريد ظهورها في أحد هذه الإطارات فاضغط. ع۴29 Set initia|‏ 
**بعد ذلك قم بتحديد خصائص كل إطار على حده كالتالي : 
أ-اضغط بيمين الفأرة على الإطار الذي تريد تحديد خصائصه . 
ب- من lلlaئمة‏ |خji. Frame Properties‏ 
ج- سيظهر لك مربع خصائص هذا الفريم كالتالي : 
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Frame Properties E) 
Marne: 1 [man 
Initial page: 2 nEw_pagqe_3. hir Brose... 


Frame slze 


width 3 |1 = [Reaive = 

Row Height 4 ا‎ [Relative >] 
Margins 

wth: E ج‎ 

Height: EEE 


LIptions 


` Besizable i 1 Browser 5 Frames Page... 


Show scrollbars: FF [I Needed <| 
Stple... LarcEl 


-1 اسم هذا الفريم . 

ا الى دوا في فا القرتم 

-3عرض هذا الفريم . 

**ملاحظة : لكي لا يتشوه شكل الإطارات باختلاف دقة العرض اتبع التالي : 
كفا في الشكل السابن كال آطاران قط . أيهن وانمخزن. اذا كانت القانمة فى اليسار والخفهة الريسة 
قى الين قمقوم تحديد كر اظار الق تمه رال هل ء ودرك الاكر تر اتا حي دف ال 

: نجهل عرض القائمة ٠١١‏ بكسل » وعرض إطار الصفحة الرئيسية نتركه .١‏ ع۷اجامR‏ 

الإطار » وهذا لن تحتاجه إلا إذا استخدمت إطارات في الأعلى أو في الأسفل . 
O O O N RR N TT Tg‏ 
-6اضغط هذا الزر واجعل قيمة و”أ)ةم5 ۴۲۵۳۴ صفراً » لإخفاء حدود كل الإطارات . 

ف الكار خاص بأفحرظة النمرنر الرانسية وال فة حت أن : 

Needed :‏ 1۴ -ظهور الشريط عند الحاجة له . 

ANAS :‏ -ظهوره باستمرار. 

Never :‏ -عدم ظھورە نهائياً . 

]وبنفس الطريقة يمكنك تحديد خصائص الفريم الأخر . [ 


##كيفية وضع الارتباطات في الصفحات التي تستخدم الإطارات ( الفريمات ) : 


عند استخدامك لطريقة و يجب عليك تحديد الإطار ( الفريم ) الذي ستفتح فيه الصفحة عند ضغط 
ارتباط ما » وذلك كالتالي : 

-1أشر علة العبارة أو و التی ترندها آن تكون ار اط : 

Create Hyberlink .ةڌذêli -2|فتح‎ 

-3اكتب الارتباط الذي تريده في خانة . URL‏ 


0 aE O 


Bookmark. | inane) <| | Target frame: || Pase Default [none] ا‎ 
L-ancEl PFararmelers... | style... 


-4اضغط على على زر » ۴۲۵۳۴ اع۲۲9 سيظهر لك الشكل التالي : 
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Target Frame 


Lurrent frames page Common targets # 


Page Default [maln] 
Same Frame 

YW hole Page 

ey ra 
Parent Frarmê 


اختر أحدها 


فحة القانعة_ مإ إ1arge‏ 


contents 


L-ancel 


**يمكتك اختباز مكات قتح الضفحة من الخانة (1) بالتاشير بالفارة . أو من اختيار الغبارة المناسبة من الخائة 
:یت . 

Default [main :‏ eو۴aلفتح‏ الصفحة في الإطار الافتراضي المسمی. "3١‏ 

Frame :‏ 5ameفتحج‏ في نفس الإطار . 

Page ,Parent Frame :‏ eاWhoفتح‏ في إطار كامل ( صفحة كاملة ) . 

eW Wind :‏ فتح في نافذة جديدة » بحيث تبقى الصفحة الأولى مفتوحة . 

-5وأخیراً اضغط . 0)۸ 


/عداد : حسن بن عبد القادر رشو 
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